leaflet.pub
a tool for shared writing and social publishing
awarm.space
1"use client";
2import { ActionButton } from "components/ActionBar/ActionButton";
3import { Sidebar } from "components/ActionBar/Sidebar";
4import { useEntitySetContext } from "components/EntitySetProvider";
5import { HelpPopover } from "components/HelpPopover";
6import { HomeButton } from "components/HomeButton";
7import { Media } from "components/Media";
8import { useLeafletPublicationData } from "components/PageSWRDataProvider";
9import { ShareOptions } from "components/ShareOptions";
10import { ThemePopover } from "components/ThemeManager/ThemeSetter";
11import { Watermark } from "components/Watermark";
12import { useUIState } from "src/useUIState";
13import { BackToPubButton, PublishButton } from "./Actions";
14import { useIdentityData } from "components/IdentityProvider";
15import { useReplicache } from "src/replicache";
16
17export function LeafletSidebar() {
18 let entity_set = useEntitySetContext();
19 let { rootEntity } = useReplicache();
20 let { data: pub } = useLeafletPublicationData();
21 let { identity } = useIdentityData();
22
23 return (
24 <Media mobile={false} className="w-0 h-full relative">
25 <div
26 className="absolute top-0 left-0 h-full flex justify-end "
27 style={{ width: `calc(50vw - ((var(--page-width-units)/2))` }}
28 >
29 <div className="sidebarContainer flex flex-col justify-end h-full w-16 relative">
30 {entity_set.permissions.write && (
31 <Sidebar>
32 {pub?.publications &&
33 identity?.atp_did &&
34 pub.publications.identity_did === identity.atp_did ? (
35 <>
36 <PublishButton />
37 <ShareOptions />
38 <ThemePopover entityID={rootEntity} />
39 <HelpPopover />
40 <hr className="text-border" />
41 <BackToPubButton publication={pub.publications} />
42 </>
43 ) : (
44 <>
45 <ShareOptions />
46 <ThemePopover entityID={rootEntity} />
47 <HelpPopover />
48 <hr className="text-border" />
49 <HomeButton />
50 </>
51 )}
52 </Sidebar>
53 )}
54 <div className="h-full flex items-end">
55 <Watermark />
56 </div>
57 </div>
58 </div>
59 </Media>
60 );
61}
62
63const blurPage = () => {
64 useUIState.setState(() => ({
65 focusedEntity: null,
66 selectedBlocks: [],
67 }));
68};